<template>
    <div class="outer_container">
        <div class="header">
            <van-image width="150" height="40" :src="logo" @click="backHandler" />
            <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" class="search" />
            <van-button class="btn" plain round size="small" text="打开APP" color="#f86442"></van-button>
        </div>
        <div style="position: fixed;z-index: 1;width: 100%">
            <van-row class="nav">
                <van-col span="5">
                    <van-sidebar class="category1" v-model="active">
                        <div style="position: relative;">
                            <van-sidebar-item class="sidebar_item" v-for="item in category1" :key="item.id">
                                <template #title>
                                    <a href="javascript:;" @click="aClickHandler($event, item.id)">{{ item.name }}</a>
                                </template>
                            </van-sidebar-item>
                        </div>
                    </van-sidebar>
                </van-col>
                <van-col span="19" class="category2">
                    <div class="category_content" v-for="(ct1) in category1" :key="ct1.id">
                        <div :id="`m${ct1.id}`">
                            <van-cell :title="ct1.name" is-link @click="ct1ToDetailHandler(ct1.id)" />
                        </div>
                        <div class="channel_list">
                            <div class="channel_item" v-for="ct2 in ct1.channels" :key="ct2.channelId">{{ ct2.channelName }}
                            </div>
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script lang="ts">

export default {
    name: 'CategoryList',
}
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Image as VanImage } from 'vant'
import getCategory from '@/api/category'
import logo from '@/static/images/xmly.jpg'
import router from '@/router/index'
const value = ref('')
const active = ref(0);
const category1 = ref<any>([])


onMounted(() => {
    getCategoryList()
})
async function getCategoryList() {
    try {
        let result = await getCategory.getCategory()
        console.log("???????", result);
        category1.value = result.data.groups
    } catch (error) {
    }
}

// 点击侧边栏
const aClickHandler = (event: any, id: any) => {
    event.target.href = `#m${id}`;
}

// 点击logo回到首页
const backHandler = () => {
    router.push("/");
}

// 点击分类内容区的标题：带着一级分类的id跳转页面
const ct1ToDetailHandler = (id: number) => {
    router.push({
        path: "/category/detail",
        name: 'Detail',
        params: {
            id
        }
    })
}

</script>

<style lang="less" scoped>
.mr {
    padding-top: 68px;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.outer_container {
    background-color: #f0f0f0;
    position: relative;

    .header {
        display: flex;
        padding: 14px;
        background-color: #ffffff;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;

        .search {
            width: 260px;
            height: 10px;
            margin-top: 10px;
        }

        .btn {
            width: 102px;
            height: 24px;
            margin-top: 6px;
            text-align: center;
        }
    }

    .nav {
        // margin-top: 10px;
        margin-top: 68px;
        position: absolute;

        .category1 {
            // --van-sidebar-width: 180px;
            --van-sidebar-padding: 12px;
            --van-sidebar-selected-border-color: #f86442;
            --van-sidebar-selected-border-height: 60px;
            --van-sidebar-background: #ffffff;
            --van-sidebar-selected-border-width: 5px;
            position: relative;
            height: 700px;
            text-align: center;

            .sidebar_item {
                border-bottom: #f2f2f2 1px solid;

                a {
                    color: #1b1a19;
                }
            }
        }

        .category2 {
            --van-cell-line-height: 24px;
            --van-cell-label-font-size: 14px;
            --van-cell-label-line-height: 22px;
            --van-cell-text-color: #221e1d;
            overflow: hidden;
            overflow-y: auto;
            // 二级分类高度
            height: 700px;

            .category_content {
                background: #ffffff;

                .channel_list {
                    display: flex;
                    padding-left: 16px;
                    flex-wrap: wrap;

                    .channel_item {
                        height: 35px;
                        line-height: 35px;
                        padding-right: 7.5px;
                        font-size: 14px;
                        color: #7e8c8d;
                    }
                }
            }

        }
    }
}
</style>